<!DOCTYPE html>
<html style="background: #fff;">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta charset="UTF-8">
    <title>我的活动</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/my-activity.css">
    <script type="text/javascript" src="js/flexible.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body style="background:none;">
    <div class="me-form-box me-tab" style="background:#fff;">
        <!--tab页面-->
        <div id="tab1" class="tab-item"><span class="tab-active">已参加</span></div>
        <div id="tab2" class="tab-item"><span>已通过</span></div>
    </div>
    <!--内容1-->
    <div id="cont1">
        <ul class="index-list" id="my-activity-cont1-ul">
            <li>
                <div class="mui-card">
                    <!--页眉，放置标题-->
                    <div class="mui-card-header mui-card-media">
                        <img src="images/n3.png" />
                        <div class="mui-media-body">
                            &nbsp;话剧《茶馆》
                            <div class="index-list-bottom-left">
                                <p style="margin-top: 0.16rem">时间：2018.12.28 - 2018.12.30</p>
                            </div>
                            <span class="mui-icon mui-icon-arrowdown" id="view-activity"></span>
                        </div>
                    </div>
                    <!--内容区-->
                    <div class="mui-card-content">
                        <img class="mui-img" src="images/jbnner.jpg" alt="">
                    </div>
                    <!--页脚，放置补充信息或支持的操作-->
                    <div class="mui-card-footer">
                        <div class="index-list-bottom-left mui-footer">
                            <p></p>
                            <p class="map" data-address="成都市锦江区人民东路61号四川人民艺术剧院">地址：成都市锦江区人民东路61号四川人民艺术剧院</p>
                            <span class="mui-icon mui-icon-trash" id="view-activity"></span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="layui-flow-more">没有更多了</div>
    </div>
    <!--内容2-->
    <div id="cont2" class="mui-hidden">
        <ul class="index-list">
            <li>
                <div class="mui-card">
                    <!--页眉，放置标题-->
                    <div class="mui-card-header mui-card-media">
                        <img src="images/n4.png" />
                        <div class="mui-media-body">
                            &nbsp;川剧-变脸舞妆晚会
                            <div class="index-list-bottom-left">
                                <p style="margin-top: 0.16rem">时间：2019.01.14 - 2019.01.15</p>
                            </div>
                            <span class="mui-icon mui-icon-arrowdown" style="float: right;position: absolute;top: 0.3rem;right: 0.5rem;"></span>
                        </div>
                    </div>
                    <!--内容区-->
                    <div class="mui-card-content">
                        <img class="mui-img" src="images/i3.jpg" alt="">
                    </div>
                    <!--页脚，放置补充信息或支持的操作-->
                    <div class="mui-card-footer">
                        <div class="index-list-bottom-left mui-footer">
                            <p></p>
                            <p class="map" data-address="成都市锦江区人民东路61号四川人民艺术剧院">地址：成都市锦江区人民东路61号四川人民艺术剧院</p>
                            <span class="mui-icon mui-icon-trash" style="float: right;position: absolute;top: 0.3rem;right: 0.5rem;"></span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="layui-flow-more">没有更多了</div>
    </div>
</body>
<script>
    $(document).ready(function () {
        /*tab选项卡*/
        $("#tab1").click(function () {
            $("#tab2 span").removeClass("tab-active");
            $("#tab1 span").addClass("tab-active");
            $("#cont2").addClass("mui-hidden");
            $("#cont1").removeClass("mui-hidden")

        });
        $("#tab2").click(function () {
            $("#tab1 span").removeClass("tab-active");
            $("#tab2 span").addClass("tab-active");
            $("#cont1").addClass("mui-hidden");
            $("#cont2").removeClass("mui-hidden")

        });
        /*点击删除按钮后，删除点击所在的li列表项*/
        $(".mui-icon-trash").click(function () {
            $(this).parents("li").remove();
        })
    })
</script>

</html>